博客站

以下是 Uniapp 项目完整的目录结构及其说明：

Uniapp 项目目录结构

├── .hbuilderx/                # HBuilderX 项目配置目录（自动生成）
├── node_modules/               # 项目依赖包目录（npm install 后生成）
├── pages/                      # 页面目录（核心目录）
│   ├── index/                  # 示例页面目录
│   │   ├── index.vue           # 页面组件
│   │   └── index.json          # 页面配置文件（可选）
│   └── ...                     # 其他页面
├── static/                     # 静态资源目录
│   ├── images/                 # 图片资源
│   ├── fonts/                  # 字体文件
│   └── ...                     # 其他静态资源
├── unpackage/                  # 打包输出目录（运行打包命令后生成）
│   ├── dist/                   # 打包后的文件
│   └── ...                     # 其他平台打包文件
├── App.vue                     # 应用入口组件
├── main.js                     # 应用入口文件
├── manifest.json               # 应用配置文件（如 AppID、图标、启动图等）
├── pages.json                  # 页面路由及全局样式配置文件
├── uni.scss                    # 全局样式文件（可定义全局 SCSS 变量）
├── index.html                  # H5 平台入口文件
├── package.json                # 项目依赖配置文件
├── README.md                   # 项目说明文档
└── ...                         # 其他自定义文件或目录

目录结构详细说明

1. .hbuilderx/

   • HBuilderX 自动生成的配置文件目录，包含项目的 IDE 配置信息。
   • 通常不需要手动修改。

2. node_modules/

   • 存放项目依赖的第三方库。
   • 通过 npm install 安装依赖后自动生成。

3. pages/

   • 核心目录，存放所有页面文件。
   • 每个页面是一个单独的文件夹，包含以下文件：
     • 页面名.vue：页面的 Vue 组件文件。
     • 页面名.json（可选）：页面的配置文件，用于覆盖 pages.json 中的配置。
   • 示例：

     pages/
     ├── index/
     │   ├── index.vue          # 首页组件
     │   └── index.json         # 首页配置（如导航栏样式）
     └── detail/
         ├── detail.vue         # 详情页组件
         └── detail.json        # 详情页配置
     

4. static/

   • 存放静态资源文件，如图片、字体、音频等。
   • 资源可以通过相对路径引用，例如：

     <image src="/static/images/logo.png"></image>
     

5. unpackage/

   • 打包生成的目录，存放不同平台的打包文件。
   • 运行 npm run build 后生成。
   • 示例：

     unpackage/
     ├── dist/                  # H5 平台打包文件
     ├── build/                 # 小程序平台打包文件
     └── ...                    # 其他平台打包文件
     

6. App.vue

   • 应用的根组件，所有页面都会加载该组件。
   • 可以在这里定义全局样式或逻辑。

7. main.js

   • 应用的入口文件，用于初始化 Vue 实例和加载全局配置。
   • 示例：

     import Vue from 'vue'
     import App from './App'
     Vue.config.productionTip = false
     App.mpType = 'app'
     const app = new Vue({
       ...App
     })
     app.$mount()
     

8. manifest.json

   • 应用的配置文件，包括：
     • 应用名称、图标、启动图。
     • 各平台的配置（如微信小程序的 AppID）。
   • 示例：

     {
       "name": "MyApp",
       "appid": "__UNI__XXXXXX",
       "description": "My Uniapp Project",
       "versionName": "1.0.0",
       "versionCode": "100",
       "icons": {
         "72": "/static/logo.png"
       }
     }
     

9. pages.json

   • 页面路由及全局样式配置文件。
   • 配置内容包括：
     • 页面路由。
     • 导航栏样式。
     • 下拉刷新、上拉加载等。
   • 示例：

     {
       "pages": [
         {
           "path": "pages/index/index",
           "style": {
             "navigationBarTitleText": "首页"
           }
         }
       ],
       "globalStyle": {
         "navigationBarTextStyle": "black",
         "navigationBarTitleText": "MyApp"
       }
     }
     

10. uni.scss

    • 全局样式文件，支持 SCSS 语法。
    • 可以定义全局变量，供所有页面使用。
    • 示例：

      $primary-color: #007AFF;
      

11. index.html

    • H5 平台的入口文件。
    • 可以自定义 HTML 模板或引入第三方库。

12. package.json

    • 项目的依赖配置文件。
    • 包含项目名称、版本、依赖库等信息。
    • 示例：

      {
        "name": "my-uniapp-project",
        "version": "1.0.0",
        "dependencies": {
          "vue": "^2.6.11"
        }
      }
      

13. README.md

    • 项目说明文档，通常包含项目简介、使用方法、注意事项等。

总结

• pages/ 和 static/ 是开发中最常用的目录。
• manifest.json 和 pages.json 是配置文件的核心。
• unpackage/ 是打包后的输出目录，用于发布到不同平台。

通过以上目录结构，您可以快速上手 Uniapp 项目的开发和发布。如果有其他问题，欢迎随时提问！